<template>
  <div>
    <ul class="title-nums">
      <li v-for="(item, index) in 20" :key="index" >
        {{index+1}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
ul {
  list-style: none;
}

.app-container {
  display: flex;
  justify-content: space-between;
}

.app-container > div {
  width: 50%;
}

.btns {
  margin: 26px 0;
}

.btns > button {
  margin: 0 12px;
}

.title-nums > li {
  float: left;
  width: 30px;
  height: 22px;
  border-radius: 11px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  margin: 6px;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
}

.title-nums > li:hover {
  background-color: rgba(252, 248, 213, 0.753);
  color: rgb(26, 30, 252);
}

.hover {
  background-color: rgb(0, 183, 255, 0.7);
}

.nei {
  padding: 20px;
  height: 30px;
}

.percent {
  width: 126px;
  height: 126px;
  position: relative;
  margin: 216px 260px;
  display: flex;
}

.percent > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
</style>